<template>
  <div class="home">
    <el-form :model="info" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" v-if="lockTime <= 0" @click="lock"
          >锁定</el-button
        >
        <el-button type="primary" v-else @click="unlock">{{
          lookText
        }}</el-button>
      </el-form-item>
      <el-form-item label="所在城市">
        <el-select v-model="info.city" placeholder="活动区域">
          <el-option
            v-for="item in citys"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input
          v-model="info.name"
          :disabled="lockTime > 0"
          placeholder="用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input
          v-model="info.age"
          :disabled="lockTime > 0"
          placeholder="年龄"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit" :disabled="lockTime > 0"
          >提交</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handlerSelect"
    >
      <el-table-column type="selection" width="55"> </el-table-column>

      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="age" label="年龄" width="120"> </el-table-column>
      <el-table-column prop="city" label="城市" width="120"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            :disabled="lockTime > 0"
            @click="edit(scope.row, scope.$index)"
            >编辑</el-button
          >
          <el-button
            type="primary"
            :disabled="lockTime > 0"
            @click="remove(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="clear" :disabled="lockTime > 0"
      >选中删除</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      citys: [],
      info: {
        city: "",
        name: "",
        age: "",
      },
      list: [],
      editIndex: -1,
      //编辑的数据的下标
      lockTime: 0,
      //锁定的时间
      lookText: "解锁",
      //按钮的文字
      selectArr: [],
      //选中的内容
    };
  },
  created() {
    this.$axios.get("data.json").then((res) => {
      console.log(res);
      this.citys = res.data.data;
    });
    //拿到城市的数据
  },
  methods: {
    submit() {
      if (this.editIndex == -1) {
        //如果编辑的下标是-1 就证明现在没有编辑的数据 那么就执行添加
        this.list.push(JSON.parse(JSON.stringify(this.info)));
        //设计到深复制浅复制 所以用JSON.parse(JSON.stringify(this.info)) 这个方法是最简单的处理方法
        this.info.name = "";
        this.info.age = "";
        this.info.city = "";
      } else {
        this.list[this.editIndex].name = this.info.name;
        this.list[this.editIndex].age = this.info.age;
        this.list[this.editIndex].city = this.info.city;
        //根据编辑的下标修改数据
        this.editIndex = -1;
        //变成-1 之后就是添加的状态了
      }
    },
    //点击提交按钮 根据 editindex的值判断现在是添加还是编辑
    handlerSelect(val) {
      console.log(val);
      this.selectArr = val;
    },
    //复选框选中时候会触发的事件
    remove(index) {
      this.list.splice(index, 1);
    },
    //删除
    edit(row, index) {
      console.log(row);
      this.info = JSON.parse(JSON.stringify(row));
      //把这一行数据回填
      this.editIndex = index;
      //把要编辑的数据的下标存下来
    },
    //点击编辑按钮执行了一个回填和保存下标

    lock() {
      this.lookText = "解锁";
      this.lockTime = 3;
    },
    //点击锁定 倒计时的时间变成3 也就意味着现在是锁定的状态 那个button的文字应该变成解锁
    // looktime 倒计时的时间 即是时间 又是判断现在是否是锁定状态的条件
    unlock() {
      this.lookText = `还剩${this.lockTime}秒解锁`;
      let timer = setInterval(() => {
        this.lockTime--;
        this.lookText = `还剩${this.lockTime}秒解锁`;
        if (this.lockTime <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    },
    //点击解锁按钮的时候 开始计时器倒计时 时间-- 并且button里的内容也跟着变化
    clear() {
      this.list = this.list.filter((item) => {
        return this.selectArr.includes(item) == false;
      });
      //选中删除 把不删的留下来  就是说如果这个数据不在selectArr里面的时候 那么就是不删的 就留下来
    },
  },
};
</script>
